<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="打印表格(函数).js" type="text/javascript"></script>
    <style>
        *{margin: 0px;padding: 0px}
        #box1{
            height: 800px;width: 1000px;
            background: blue;margin:  0px auto;
        }
        #box2{
            height: 600px;width: 800px;
            background: orangered;margin: 0px auto;
        }
        #box3{
            height: 400px;;width: 600px;
            background: lightgreen;margin: 0px auto;
        }
    </style>
</head>
<body>
<!--
			事件流： 页面接收事件的顺序

			DOM事件流： 当事件发生时，事件会在该元素节点和根节点之间的路径进行传播，传播过程中所遇到的节点都会接收该事件


				冒泡： 从最具体元素传播最不具体的元素

					事件发生的元素节点传递到根节点

				捕获： 从最不具体的元素传播到最具体元素

					从根节点传播到事件发生的具体节点

				注意： IE中只有冒泡排序  非IE中既有冒泡也有捕获


			阻止事件冒泡：

				事件对象.stopPropagation()

			阻止浏览器的默认行为：

				return false

				事件对象.preventDefault();

		-->
    <div id="box1">box1
        <div id="box2">box2
            <div id="box3">box3</div>
        </div>
    </div>
    <script type="text/javascript">
        //1,为三个元素绑定事件
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");

        //2,冒泡事件(点击box3中，触发的事件，会依次向上层节点触发)
        /**
         *
         box1.onclick = function () {
            alert(1);
        };
         box2.onclick = function () {
            alert(2);
        };
         box3.onclick = function () {
            alert(3);
        };
        */
        //3，阻止事件冒泡
        /**
          box1.onclick = function (event) {
            alert(1);
        //阻止事件冒泡
            event.stopPropagation();
        }
         box2.onclick = function (event) {
            alert(2);
            event.stopPropagation();
        }
         box3.onclick = function (event) {
            alert(3);
            event.stopPropagation();
        }
         */
        //4,捕获事件(按照从1-3的顺序发生)
        var bt1 = document.getElementById("box1");
        //这里的false就是代表冒泡顺序，true就是代表捕获顺序
        bt1.addEventListener("click",function () {
            alert(1)
        },true);
        var bt2 = document.getElementById("box2");
        bt2.addEventListener("click",function () {
            alert(2)
        },true);
        var bt3 = document.getElementById("box3");
        bt3.addEventListener("click",function () {
            alert(3)
        },true);



    </script>


</body>
</html>